fix: handle CLS issues in chart modal by graphieros · Pull Request #2032 · npmx-dev/npmx.dev

graphieros · 2026-03-11T06:35:55Z

The introduction of the data correction section in the chart modal leads to CLS when toggling the menu.
The fix consists in:

adapting the height of the chart depending on the open state of the data correction menu
pausing chart element transitions to avoid triggering them when the chart is resized.

BEFORE:

Enregistrement.de.l.ecran.2026-03-11.a.07.34.48.mov

AFTER:

Enregistrement.de.l.ecran.2026-03-11.a.07.31.29.mov

vercel · 2026-03-11T06:36:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 14, 2026 5:44am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 14, 2026 5:44am
npmx-lunaria	Ignored		Mar 14, 2026 5:44am

codecov · 2026-03-11T06:37:53Z

Codecov Report

❌ Patch coverage is 87.17949% with 5 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/TrendsChart.vue	87.17%	3 Missing and 2 partials ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-03-11T06:40:19Z

📝 Walkthrough

Walkthrough

This PR updates the TrendsChart component to use a responsive, dynamic chartHeight (accounting for mobile vs modal and correction controls), adds resize guards (isResizing, pauseChartTransitions, timeout debounce and cleanup on unmount) to suppress SVG transitions during resizing, replaces static height usage in chart configuration, refactors the data-correction UI into an animated, height-controlled container, and applies a no-transition class and related logic to chart primitives, minimap and print interactions while resizing.

Possibly related PRs

fix: stabilise modal chart render after transition #1034: Addresses chart rendering stability during UI transitions by deferring chart mounting until a modal transition completes — closely related to resize/transition guarding.
fix: increase chart right padding #1620: Modifies chart configuration (right padding) in the same app/components/Package/TrendsChart.vue, touching the chart layout logic.
fix: address CLS in downloads modal #1619: Alters container height and responsiveness in app/components/Package/TrendsChart.vue, overlapping with this PR's height and responsiveness changes.

Suggested reviewers

danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the issue (CLS caused by data correction section) and describes the implemented fixes (dynamic chart height and paused transitions), with visual before/after comparisons.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch chart-improvements

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.

Add a .trivyignore file to your project to customize which findings Trivy reports.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/Package/TrendsChart.vue (1)
1719-1726: Consider adding height to the transition for smoother expansion.

Currently, only opacity is transitioned (transition-[opacity]), so the container height snaps instantly from max-h-0 to max-h-[220px]. If you want a smoother expand/collapse animation, you could transition both properties:
-          class="overflow-hidden transition-[opacity] duration-200 ease-out"
+          class="overflow-hidden transition-[max-height,opacity] duration-200 ease-out"
If the instant height change is intentional to minimise perceived CLS, this is fine as-is.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 906e8b30-3531-4b15-abc5-49dfb0829107

📥 Commits

Reviewing files that changed from the base of the PR and between 3712560 and 6e5af51.

📒 Files selected for processing (1)

app/components/Package/TrendsChart.vue

app/components/Package/TrendsChart.vue

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Package/TrendsChart.vue (1)

1698-1844: ⚠️ Potential issue | 🟠 Major

Make the correction panel a proper disclosure.

Line 1711 only hides the panel visually, so the sliders on Lines 1726, 1741 and 1756 plus the checkbox on Line 1828 stay tabbable when the section is “closed”. The toggle on Line 1698 also does not expose its expanded state.

♿ Suggested fix

         <button
           type="button"
+          :aria-expanded="showCorrectionControls"
+          aria-controls="trend-correction-controls"
           class="self-start flex items-center gap-1 text-2xs font-mono text-fg-subtle hover:text-fg transition-colors"
           `@click`="showCorrectionControls = !showCorrectionControls"
         >
@@
         <div
+          id="trend-correction-controls"
+          :aria-hidden="!showCorrectionControls"
+          :inert="!showCorrectionControls || undefined"
           class="overflow-hidden transition-[opacity] duration-200 ease-out"
           :class="
             showCorrectionControls
               ? 'max-h-[220px] opacity-100'
               : 'max-h-0 opacity-0 pointer-events-none'
           "
         >

🧹 Nitpick comments (1)

app/components/Package/TrendsChart.vue (1)

1351-1356: Unify the chart-height maths in one place.

chartHeight now uses 950 / 600 / 494, while the wrapper on Lines 1861-1867 uses a separate 567 / 491 branch. Those values will drift over time and make this CLS fix brittle, because the outer container and VueUiXy sizing can diverge silently.

Also applies to: 1861-1867

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 63f7d82a-30ad-4bb3-a3ba-65fb3d163667

📥 Commits

Reviewing files that changed from the base of the PR and between 6e5af51 and aaa02a0.

📒 Files selected for processing (1)

app/components/Package/TrendsChart.vue

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/Package/TrendsChart.vue (1)
2170-2173: Scope .no-transition styles to this component root

The selector is currently global and generic. Scoping it to #trends-chart keeps the transition guard local and avoids unintended styling collisions with other components using the same class name.
Proposed refactor
-.no-transition line,
-.no-transition circle {
+#trends-chart .no-transition line,
+#trends-chart .no-transition circle {
   transition: none !important;
 }

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3f9108c3-aaba-4626-adf5-6ca247467e32

📥 Commits

Reviewing files that changed from the base of the PR and between aaa02a0 and 31ce284.

📒 Files selected for processing (1)

app/components/Package/TrendsChart.vue

app/components/Package/TrendsChart.vue

fix: handle CLS issues in chart modal

6e5af51

coderabbitai bot reviewed Mar 11, 2026

View reviewed changes

app/components/Package/TrendsChart.vue Show resolved Hide resolved

graphieros enabled auto-merge March 11, 2026 06:42

Merge branch 'main' into chart-improvements

c841e6d

vercel bot deployed to Preview – npmx.dev March 12, 2026 05:29 View deployment

graphieros and others added 2 commits March 12, 2026 11:24

Merge branch 'main' into chart-improvements

aaa3eb6

[autofix.ci] apply automated fixes

aaa02a0

vercel bot deployed to Preview – npmx.dev March 12, 2026 10:27 View deployment

coderabbitai bot reviewed Mar 12, 2026

View reviewed changes

Merge remote-tracking branch 'origin/main' into chart-improvements

31ce284

vercel bot deployed to Preview – docs.npmx.dev March 13, 2026 12:23 View deployment

vercel bot deployed to Preview – npmx.dev March 13, 2026 12:23 View deployment

coderabbitai bot reviewed Mar 13, 2026

View reviewed changes

app/components/Package/TrendsChart.vue Show resolved Hide resolved

Merge branch 'main' into chart-improvements

a96d693

graphieros added the front Frontend, Design label Mar 14, 2026

vercel bot deployed to Preview – npmx.dev March 14, 2026 05:44 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: handle CLS issues in chart modal#2032

fix: handle CLS issues in chart modal#2032
graphieros wants to merge 6 commits intomainfrom
chart-improvements

graphieros commented Mar 11, 2026

Uh oh!

vercel bot commented Mar 11, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 11, 2026

Uh oh!

coderabbitai bot commented Mar 11, 2026 •

edited

Loading

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

graphieros commented Mar 11, 2026

Uh oh!

vercel bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 11, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel bot commented Mar 11, 2026 •

edited

Loading

coderabbitai bot commented Mar 11, 2026 •

edited

Loading